.header-support {
    display: flex;
    background-image: url(../../../../assets/showcase/images/header-pro.jpg);
    background-size: cover;
    height: 10rem;
    color: #ffffff;
}

.options {
    background-color: var(--surface-b);
}

.support-box {
    height: 20rem;

    &.pro {
        background-color: #303132;
        background-image: url(../../../../assets/showcase/images/pro-effect.png);
        background-size: cover;
        color: #ffffff;
    }

    a {
        color: #2196f3;
        font-weight: 600;

        &:hover {
            text-decoration: underline;
        }
    }
}

.action-button {
    background-color: #D8692B;
}

.section-moreaboutpro {
    background-color: #303132;
    color: white;
    margin-top: 1rem;

    p {
        color: #aaaaaa;
    }

    h6 {
        margin-top:0;
    }

    .section-header {
        position: relative;
        bottom: 3.5rem;
        background-color: #303132;
        padding: 1rem;
        display: inline;
        border-radius: 4px 4px 0 0;
    }

    a {
        color: #2196f3;
        font-weight: 600;

        &:hover {
            text-decoration: underline;
        }
    }
}

.section-newfeatures {
    margin-top: 2rem;
    background-color: var(--surface-a);

    p {
        color: var(--text-color-secondary);
    }
}

.dot {
    height: 1rem;
    width: 1rem;
    min-height: 1rem;
    min-width: 1rem;
    border-radius: 2px;
    background-color: #DA2F4F;

    &.color-1 {
        background-color: #2B76D8;
    }
    &.color-2 {
        background-color: #D8692B;
    }
    &.color-3 {
        background-color: #6ECE65;
    }
    &.color-4 {
        background-color: #E9DC68;
    }
    &.color-5 {
        background-color: #C159A4;
    }
    &.color-6 {
        background-color: #2BD8C3;
    }
    &.color-7 {
        background-color: #2BAED8;
    }
    &.color-8 {
        background-color: #D8A82B;
    }
    &.color-9 {
        background-color: #A7C553;
    }
    &.color-10 {
        background-color: #A06FC7;
    }
}
